:root {
  --t-quick-filter_mobile-placeholder-color: #ADADAD;
  .quick-filter_select_options{
    font-size: 12px;
    // color: #727272;
    color: rgba(0, 0, 0, var(--t-color-opacity, /*批量处理透明度,将80%替换为--t-color-opacity*/.8));
    .q-item{
      height: 44px;
      padding: 16px 0px;
      margin-left: 16px;
      margin-right: 20px;
      // border-bottom: 1px solid #DFE0E2;
      font-size: 14px;

      &::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 0px;
        background-color: #DFE0E2;
        transform: scaleY(0.5);
        transform-origin: bottom;
      }
    }

    &:active{
      background-color: #F0F2F5;
    }

    &.selected{
      color: var(--t-color);

      & *{
        color: var(--t-color)
      }
    }

    &.clearItemContainer{
      // padding-top: 12px;
      padding-left: 0px;
      padding-right: 0px;
      background-color: #F0F2F5;

      .clearItem{
        background-color: #fff;
        // color: rgba(0, 0, 0, .32);
        margin-left: 0px;
        padding-left: 26px;
        margin-right: 0px;
        padding-right: 26px;
        text-align: center;
        color: var(--t-color);
        border-top: 1px solid #F0F2F5;
      }
    }

    .quick-filter_option{
      display: flex;
      align-items: center;
      justify-content: space-between;

      .quick-filter_option_label_right{
        display: flex;
        align-items: center;
        justify-content: space-between;
        column-gap: 16px;

        .quick-filter_option_label_right_check{
          width: 10px;

          .icon-t-check-fine{
            font-size: 10px;
          }
        }
      }
    }
  }

  .quick-filter_select_title-container{
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;

    .title{
      font-weight: 400;
      font-size: 16px;
    }
  }
}

.t-quick-filter_mobile_items-center {
  justify-content: center;
  height: 32px;
  background-color: #fff;

  .t-quick-filter_chip-group-label{
      display:none;
  }

  .SelectHelper{
    flex: 1;
    flex-wrap: nowrap;
    overflow: hidden;

    .SelectHelper-container{
      width: 100%;
      .t-input{
        min-height: unset;
      }

      .tr-input-form .t-input{
        border: none;
      }

      .tr-input-default .q-field--dense .q-field__inner .q-field__control{
        // border-color: transparent;
      }

      .select_helper_tag{
        .select-tag{
          color: #727272;
        }
        button{
          // visibility: hidden;
        }
      }

      .q-field__prepend{
        & > span{
          flex-wrap: nowrap !important;
          overflow-x: auto;
          scrollbar-width: none; /* For Firefox */
          -ms-overflow-style: none; /* For Internet Explorer and Edge */
          &::-webkit-scrollbar {
            display: none;
          }

          .select_helper_input_inner.q-placeholder::placeholder{
            font-size: 12px;
            color: var(--t-quick-filter_mobile-placeholder-color) !important;
          }
        }
      }
      .q-field__append{
        height: unset;

        .icon-t-arrow-down{
          font-size: 10px !important;
          transform: unset !important;
        }
      }
    }
  }

  .selectContainer {
    flex: 1;
    overflow: hidden;
    // justify-content: center;

    .mobile-select-clip {
      justify-content: center;

      .fas.dx-icon.arrow {
        font-size: 10px;
      }

      &.popupShow {
        .fas.dx-icon.arrow {
          color: var(--t-color);
        }

        &.unSelected {
          .fas.dx-icon.arrow {
            color: var(--t-quick-filter_mobile-placeholder-color);
          }
        }
      }

      .q-field__control {
        min-height: 32px;

        .q-field__control-container {

          .q-field__native {
            min-height: 32px;
            height: 32px;
          }

          div.items-center {
            overflow: hidden;
          }
        }

        .q-field__append {
          height: 32px;
        }
      }

      .selected {
        display: flex;
        flex-wrap: nowrap;
        text-wrap: nowrap;
        column-gap: 8px;
        color: #727272;
        overflow: overlay;
        font-size: 12px;

        &::-webkit-scrollbar {
          width: 0px;
          height: 0px;
          background-color: transparent;
        }

        &.unSelected {
          color: var(--t-quick-filter_mobile-placeholder-color);

          & * {
            color: var(--t-quick-filter_mobile-placeholder-color);
          }
        }

        &.popupShow {
          color: var(--t-color);
        }

        .placeholder {
          color: var(--t-quick-filter_mobile-placeholder-color);
        }

        .item {
          text-wrap: nowrap;
          white-space: nowrap;
        }
      }

      & > div.col.self-stretch {
        flex: initial;
      }
    }
  }
}

.for-saas{
    &.t-quick-filter_mobile_items-center{
        justify-content: flex-start;
        column-gap: 24px;
    }
    .selectContainer{
        flex:unset;
        max-width: var(--t-saas-max-width, 29%);

        .selected{
            .item, .placeholder{
              white-space: nowrap; /* 禁止换行 */
              overflow: hidden; /* 隐藏溢出内容 */
              text-overflow: ellipsis; /* 显示省略号 */
            }
        }
    }
}
